<!DOCTYPE html>

<html lang="en" data-content_root="../../">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Environment variables &#8212; Pytch  documentation</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=03e43079" />
    <link rel="stylesheet" type="text/css" href="../../_static/classic.css?v=36340f97" />
    <link rel="stylesheet" type="text/css" href="../../_static/css/pytch-classic.css?v=0321735e" />
    
    <script src="../../_static/documentation_options.js?v=7f41d439"></script>
    <script src="../../_static/doctools.js?v=9bcbadda"></script>
    <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
    
    <link rel="icon" href="../../_static/favicon.ico"/>
    <link rel="author" title="About these documents" href="../../about.html" />
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Tutorials" href="tutorials.html" />
    <link rel="prev" title="Webapp (developer guide)" href="index.html" /> 
  </head><body>
<div class="NavBar">
  <a href="../../../app/"><h1>Pytch</h1></a>
  <ul>
    <a href="https://pytch.scss.tcd.ie/"><li>About Pytch</li></a>
    <a href="../../index.html"><li>Help</li></a>
    <a href="../../../app/tutorials/"><li>Tutorials</li></a>
    <a href="../../../app/my-projects/"><li>My projects</li></a>
  </ul>
</div>
<div class="warning-work-in-progress">
  <p>These help pages are incomplete — we are working on it!</p>
</div>
  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <section id="environment-variables">
<span id="pytch-webapp-environment-variables"></span><h1>Environment variables<a class="headerlink" href="#environment-variables" title="Link to this heading">¶</a></h1>
<p>The webapp relies on various environment variables.  Note that the
values of these variables are injected by the build system (Vite) to
make them available to the browser.</p>
<dl class="simple">
<dt><code class="docutils literal notranslate"><span class="pre">VITE_VERSION_TAG</span></code></dt><dd><p>String to display in the header navigation bar, e.g., <code class="docutils literal notranslate"><span class="pre">&quot;v1.2.3&quot;</span></code>.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_STATIC_BLOBS_BASE</span></code></dt><dd><p>Initial portion of URL from which to fetch large blobs like font
files and movie files which change outside the development process
of the front-end app.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_SKULPT_BASE</span></code></dt><dd><p>Initial portion of URL from which the Skulpt JavaScript files will
be fetched.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_TUTORIALS_BASE</span></code></dt><dd><p>Initial portion of URL from which tutorial data (the index;
individual tutorial content; assets used in tutorials) will be
fetched.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_MEDIALIB_BASE</span></code></dt><dd><p>Initial portion of URL from which assets within the media library
will be fetched.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_LESSON_SPECIMENS_BASE</span></code></dt><dd><p>Initial portion of URL from which lesson “specimens” will be
fetched.  This is currently outside the normal deployment structure,
to allow independent development and updates.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_DEMOS_BASE</span></code></dt><dd><p>Initial portion of URL from which demo zipfiles will be fetched.
This is currently outside the normal deployment structure, to allow
independent development and updates.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_DEPLOY_BASE_URL</span></code></dt><dd><p>“Root URL” of the <strong>site</strong> deployment.  The <strong>webapp</strong> is only one
part of the site.  For example, the documentation lives within the
site but outside the webapp.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_LIVE_RELOAD_WEBSOCKET</span></code></dt><dd><p>Whether (<code class="docutils literal notranslate"><span class="pre">&quot;no&quot;</span></code> or <code class="docutils literal notranslate"><span class="pre">&quot;yes&quot;</span></code>) to attempt to connect to a websocket
server for live-reload of tutorial material.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_USE_REAL_GOOGLE_DRIVE</span></code></dt><dd><p>Whether (<code class="docutils literal notranslate"><span class="pre">&quot;no&quot;</span></code> or <code class="docutils literal notranslate"><span class="pre">&quot;yes&quot;</span></code>) to truly connect to the Google Drive
API endpoints; if not, a test mock is instead.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_GOOGLE_API_KEY</span></code></dt><dd><p>If truly using the Google Drive API, the API Key to use.  Ignored
otherwise.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_GOOGLE_APP_ID</span></code></dt><dd><p>If truly using the Google Drive API, the Application ID to use.
Ignored otherwise.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">VITE_GOOGLE_CLIENT_ID</span></code></dt><dd><p>If truly using the Google Drive API, the Client ID to use.  Ignored
otherwise.</p>
</dd>
</dl>
<section id="how-these-variables-get-set">
<h2>How these variables get set<a class="headerlink" href="#how-these-variables-get-set" title="Link to this heading">¶</a></h2>
<p>There are two settings where the app gets served:</p>
<section id="local-development">
<h3>Local development<a class="headerlink" href="#local-development" title="Link to this heading">¶</a></h3>
<p>The script <code class="docutils literal notranslate"><span class="pre">dev-server-pieces.sh</span></code> within the <code class="docutils literal notranslate"><span class="pre">pytch-build</span></code> repo
sets the environment variables and then launches
<code class="docutils literal notranslate"><span class="pre">dev-server-webapp.sh</span></code>.  That second script also heeds some
additional, optional environment variables:</p>
<dl class="simple">
<dt><code class="docutils literal notranslate"><span class="pre">DEV_VITE_BASE_PATH</span></code></dt><dd><p>If set, this overrides the default Vite base path of <code class="docutils literal notranslate"><span class="pre">&quot;/&quot;</span></code>.  If
set, its value should both start with a <code class="docutils literal notranslate"><span class="pre">/</span></code> character and end
with a <code class="docutils literal notranslate"><span class="pre">/</span></code> character.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">DEV_VITE_USE_PREVIEW</span></code></dt><dd><p>If set to <code class="docutils literal notranslate"><span class="pre">&quot;yes&quot;</span></code>, launch the local webserver using <code class="docutils literal notranslate"><span class="pre">vite</span> <span class="pre">build</span></code>
followed by <code class="docutils literal notranslate"><span class="pre">vite</span> <span class="pre">preview</span></code>.  (Otherwise, just use <code class="docutils literal notranslate"><span class="pre">vite</span></code>.)
Using <code class="docutils literal notranslate"><span class="pre">vite</span> <span class="pre">build</span></code> is slower, but a closer approximation to what
happens when deploying a build.</p>
</dd>
<dt><code class="docutils literal notranslate"><span class="pre">BROWSER</span></code></dt><dd><p>Can be set to <code class="docutils literal notranslate"><span class="pre">&quot;none&quot;</span></code> to suppress Vite’s normal behaviour of
launching the default browser.</p>
</dd>
</dl>
<p>The <code class="docutils literal notranslate"><span class="pre">dev-server-webapp.sh</span></code> script also reads environment
variables from the <code class="docutils literal notranslate"><span class="pre">src/.env</span></code> file within this repo.  That file sets
up the environment variables relating to the Google Drive integration.
For local development, the contents of <code class="docutils literal notranslate"><span class="pre">.env</span></code> usually specify either
a mock (via <code class="docutils literal notranslate"><span class="pre">VITE_USE_REAL_GOOGLE_DRIVE=no</span></code>) or a development Google
cloud app (via its keys and IDs) which is set up to allow
<code class="docutils literal notranslate"><span class="pre">localhost</span></code> origins.</p>
</section>
<section id="building-deployment-zipfile">
<h3>Building deployment zipfile<a class="headerlink" href="#building-deployment-zipfile" title="Link to this heading">¶</a></h3>
<p>The script <code class="docutils literal notranslate"><span class="pre">website-layer/make.sh</span></code> in this <code class="docutils literal notranslate"><span class="pre">pytch-webapp</span></code> repo
sets the paths relative to the value of the <code class="docutils literal notranslate"><span class="pre">DEPLOY_BASE_URL</span></code>
environment variable, which in turn is provided by the <code class="docutils literal notranslate"><span class="pre">make.sh</span></code>
script in the top-level <code class="docutils literal notranslate"><span class="pre">pytch-releases</span></code> repo.  The <code class="docutils literal notranslate"><span class="pre">make.sh</span></code>
script works out whether you’re building a versioned release or a beta
and sets <code class="docutils literal notranslate"><span class="pre">DEPLOY_BASE_URL</span></code> accordingly.</p>
<p>(That variable should perhaps be named <code class="docutils literal notranslate"><span class="pre">DEPLOY_BASE_PATH</span></code>; todo?)</p>
</section>
</section>
</section>


            <div class="clearer"></div>
          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="Main">
        <div class="sphinxsidebarwrapper"><ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../user/index.html">Using the Pytch web app</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../vm/user/index.html">Writing Pytch programs</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../about.html">About Pytch</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../contact.html">Contact</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="../../developer.html">Developer documentation</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../../developer/development-setup.html">Development setup</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/design-overview.html">Design overview</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../vm/developer/index.html">VM</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="index.html">Webapp</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="index.html#top-level-routes">Top-level routes</a></li>
<li class="toctree-l3 current"><a class="reference internal" href="index.html#individual-aspects-of-design">Individual aspects of design</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../medialib/developer/index.html">Media library</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/index.html">Website</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../build-tools/index.html">Tools</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../source-build.html">Source and build information</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../releases/changelog.html">Changelog</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../legal/index.html">Legal information</a></li>
</ul>
<div class="docs-home-link"><hr>
  <ul>
    <li>
      <a href="../../index.html">Pytch help home</a>
    <li>
  </ul>
</div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  </body>
</html>